// modify
// Name:            uCheck
//
// Description:     Define style for uCheck Plugin
//
// Component:       `.am-ucheck`
//
// Sub-objects:     `.am-ucheck-icons`
//                  `.am-ucheck-checkbox`
//                  `.am-ucheck-radio`
//
// States:
//
// Used:            Icon
//
// Uses:
//
// =============================================================================

/* ==========================================================================
   Component: uCheck Plugin
 ============================================================================ */

@ucheck-disabled-color: mix(@gray-light, white, 38%);
.@{ns}checkbox, .@{ns}radio, .@{ns}checkbox-inline, .@{ns}radio-inline {
    // margin-bottom: 12px;
    padding-left: 22px;
    min-height: 20px;
    position: relative;
    transition: color .25s linear;
    font-size: @global-font-size - 0.2;
    line-height: 1.6; // 21px;
}

label {
    &.@{ns}checkbox, &.@{ns}radio {
        font-weight: normal;
    }
}

.@{ns}ucheck-icons {
    color: @gray-light;
    display: block;
    height: 20px;
    top: 0;
    left: 0;
    position: absolute;
    width: 20px;
    text-align: center;
    line-height: 21px;
    font-size: 18px;
    cursor: pointer;
}

.@{ns}checkbox, .@{ns}radio, .@{ns}checkbox-inline, .@{ns}radio-inline {
    .@{ns}icon-checked, .@{ns}icon-unchecked {
        position: absolute;
        left: 0;
        top: 0;
        display: inline-table;
        margin: 0;
        background-color: @white;
        transition: color .25s linear;
        &:before {
            // speak: none;
            .am-icon-font();
        }
    }
    .@{ns}icon-checked {
        opacity: 0;
    }
}

.@{ns}checkbox, .@{ns}checkbox-inline {
    .@{ns}icon-checked:before {
        content: @fa-var-check-square-o;
    }
    .@{ns}icon-unchecked:before {
        content: @fa-var-square-o;
    }
}

.@{ns}radio, .@{ns}radio-inline {
    .@{ns}icon-checked:before {
        content: @fa-var-dot-circle-o;
    }
    .@{ns}icon-unchecked:before {
        content: @fa-var-circle-o;
    }
}

.ucheck-state-variant(@color) {
    &.@{ns}checkbox-checked,
    &.@{ns}radio-checked {

        .@{ns}ucheck-icons {
            .@{ns}icon-checked  {
                color: @color;
            }
        }
    }

    .@{ns}ucheck-checkbox, .@{ns}ucheck-radio {
        // hover
        &:hover:not(.@{ns}nohover):not(:disabled)+.@{ns}ucheck-icons {
            color: @color;
        }
    }
}

.@{ns}ucheck-checkbox, .@{ns}ucheck-radio {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    opacity: 0;
    outline: none !important;
    // hover state
    &:hover:not(.@{ns}nohover):not(:disabled)+.@{ns}ucheck-icons {
        color: @global-primary;
    }
}

.@{ns}checkbox-checked,
.@{ns}radio-checked {
    .@{ns}ucheck-icons {
        .@{ns}icon-unchecked {
            opacity: 0;
        }
        .@{ns}icon-checked {
            color: @global-primary;
            opacity: 1;
        }
    }
}

.@{ns}checkbox-disabled,
.@{ns}radio-disabled {
    cursor: not-allowed;

    .@{ns}ucheck-icons {
        cursor: not-allowed;

        .@{ns}icon-unchecked {
            opacity: 0;
        }
        .@{ns}icon-checked {
            opacity: 1;
            color: @ucheck-disabled-color;
        }
    }
}

// color modifiers
.@{ns}checkbox, .@{ns}radio, .@{ns}checkbox-inline, .@{ns}radio-inline {
    &.@{ns}secondary {
        .ucheck-state-variant(@global-secondary);
    }
    &.@{ns}success {
        .ucheck-state-variant(@global-success);
    }
    &.@{ns}warning {
        .ucheck-state-variant(@global-warning);
    }
    &.@{ns}danger {
        .ucheck-state-variant(@global-danger);
    }
}

// form validate state
.@{ns}field-error+.@{ns}ucheck-icons {
    color: @global-danger;
}

.@{ns}field-valid+.@{ns}ucheck-icons {
    color: @global-success;
}


/*
// Group Addon
.@{ns}input-group-label {
  .@{ns}radio,
  .@{ns}checkbox {
    margin: -2px 0;
    padding-left: 15px;
  }
}

// Form inline style
.@{ns}form-inline .@{ns}checkbox,
.@{ns}form-inline .@{ns}radio {
  padding-left: 24px;
}
*/
